<template>
  <view class="wrapper">
    <view class="header" v-if="detail">
      <image class="left" :src="detail.staffHeadimg"></image>
      <view class="right">
        <view class="name">{{ detail.staffName }}</view>
        <!--<view class="level">{{ detail.staffName }}</view>-->
      </view>
    </view>

    <view class="info" v-if="detail">
      <view class="item" @click="handleLocationClick">
        <view class="label">{{ detail.comName }}</view>
        <text class="cuIcon-right content"></text>
      </view>
      <view class="item">
        <view class="label">预约地址：</view>
        <view class="content">{{ detail.address }}</view>
      </view>
      <view class="item">
        <view class="label">预约时间：</view>
        <view class="content">{{ detail.appointmentTime || '线下' }}</view>
      </view>
      <view class="item" v-if="detail.realname">
        <view class="label">预约人：</view>
        <view class="content">{{ detail.realname }}</view>
      </view>
      <view class="item">
        <view class="label">订单状态：</view>
        <view class="content">{{ statusMapping[detail.status] }}</view>
      </view>
      <view class="item">
        <view class="label">下单时间：</view>
        <view class="content">{{ detail.createTime }}</view>
      </view>
      <view class="item" v-if="detail.status >= 4">
        <view class="label">支付时间：</view>
        <view class="content">{{ detail.payTime }}</view>
      </view>
      <view class="item" v-if="detail.status >= 4">
        <view class="label">支付方式：</view>
        <view class="content">{{ detail.payWay }}</view>
      </view>
      <view class="item" v-if="detail.status == 3">
        <view class="label">优惠方式：</view>
        <picker :range="preferentialType" range-key="label" :value="preferentialIndex" @change="handleSelect">
          <view class="content">
            <text>{{ preferentiaModel.label }}</text>
            <text class="cuIcon-right"></text>
          </view>
        </picker>
      </view>
      <view class="item">
        <view class="label">订单号：</view>
        <view class="content">{{ detail.id }}</view>
      </view>
      <view class="action" v-if="type == 1">
        <view class="btn" v-if="detail.status == 1" @click.stop="cancelOrder(detail)">取消服务</view>
        <view class="btn" v-if="detail.status == 2" @click.stop="stopOrder(detail)">结束服务</view>
      </view>

      <view class="action" v-else>
        <view class="btn" v-if="detail.status == 3" @click.stop="pay(detail)">立即支付</view>
      </view>

    </view>

    <view class="list" v-if="detail && ((type == 0 && detail.staff.length > 0) || type == 1)">
      <view class="title">
        <view>当前手艺人</view>
        <button class="cu-btn" @click="handleAddTechnicianClick" v-if="type == 1 && detail.status == 2">增加</button>
      </view>

      <view class="item" v-for="(item,i) in detail.staff" :key="i" @click="handleUnBind(item)">
        <view class="left">
          <image class="avatar" :src="item.staffHeadimg"></image>
          <view class="name">{{ item.staffName }}</view>
        </view>
        <view class="btn" v-if="type == 1 && detail.status == 2">解除</view>
      </view>

    </view>


    <select-technician ref="select" :shop-id="detail?detail.comId:''"/>
    <my-dialog ref="pay" content="支付成功" icon="cuIcon-check"/>
    <my-dialog content="你确定要取消订单吗？" ref="cancel" show-cancel/>
    <my-dialog content="你确定要结束服务吗？" ref="stop" show-cancel/>
  </view>
</template>

<script>
import Api from "@/utils/Api";
import MyDialog from "@/components/dialog";
import SelectTechnician from "@/pages/index/my/technician/order/components/selectTechnician";

export default {
  components: {SelectTechnician, MyDialog},
  name: "technician-order-info",
  data() {
    return {
      detail: null,
      type: 0,
      statusMapping: ["已取消", "已预约", "进行中", "已完成", "已支付", "已评价",],

      preferentialType: [
        {label: '无', value: null}
      ],
      preferentialIndex: 0,
    }
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    this.id = options.id;
    this.type = options.type || 0
    this.getInfo();
  },
  computed: {
    preferentiaModel() {
      return this.preferentialType[this.preferentialIndex];
    }
  },
  methods: {
    refresh() {
      this.getInfo();
    },
    handleLocationClick() {
      uni.openLocation({
        longitude: Number(this.detail.lng),
        latitude: Number(this.detail.lat),
        name: this.detail.address,
        success: () => console.log("成功"),
        fail: err => console.log(err)
      })
    },
    getInfo() {
      Api.getOrderDetail(this.id).then(res => {
        this.detail = res;
		console.log(res,888)

        let {coupon, numberCard, saleCard, valueCard} = res.discount;
        if (coupon)
          this.preferentialType.push({label: `优惠券 - 优惠${coupon}元`, value: 4})
        if (numberCard)
          this.preferentialType.push({label: `次卡 - 剩余${numberCard}次`, value: 1})
        if (saleCard)
          this.preferentialType.push({label: `折扣卡 - ${saleCard * 10}折`, value: 3})
        if (valueCard)
          this.preferentialType.push({label: `储蓄卡 - 剩余${valueCard}元`, value: 2})

        console.log({coupon, numberCard, saleCard, valueCard})
      })
    },
    stopOrder(item) {
      this.$refs.stop.show().then(_ => {
        Api.finishService(item.id).then(res => {
          this.$toast("服务已结束。")
          this.refresh();
        })
      })
    },
    cancelOrder(item) {
      this.$refs.cancel.show().then(_ => {
        Api.cancelService(item.id).then(res => {
          this.$toast("订单取消成功。")
          this.refresh();
        })
      })
    },
    pay(item) {
      Api.onlinePay(item.id, this.preferentiaModel.value).then(data => {
        if (data === null) {
          this.$refs.pay.show("已使用折扣支付成功");
          this.handlePaySuccess();
        } else {
          this.core.wxMpPay(data, () => {
            this.$refs.pay.show("支付成功")
            this.handlePaySuccess();
          })
        }
      })
    },
    handlePaySuccess(){
      this.refresh()
      uni.setStorageSync("needRefreshOrderNum", true)
      this.core.prePageHandleMethod('refresh')
    },
    needRefreshOrderNum() {
      uni.setStorageSync("needRefreshOrderNum", true)
    },
    handleSelect(e) {
      this.preferentialIndex = e.detail.value
    },
    handleAddTechnicianClick() {
      this.$refs.select.show().then(id => {
        Api.bindTechnician(this.detail.id, id).then(res => {
          this.refresh();
        })
      })
    },
    handleUnBind(item){
      if(this.type == 1 && this.detail.status == 2){
        Api.bindTechnician(item.ordersId, item.staffId).then(res => {
          this.refresh();
        })
      }
    },
  },
}
</script>

<style scoped lang='scss'>
.wrapper {


  .header {
    background-color: white;
    display: flex;
    padding: r(20px);

    .left {
      height: r(120px);
      width: r(120px);
      border-radius: 50%;
      margin-right: 30px;
    }

    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;


      .name {
        color: #333333;
        font-size: r(32px);
        margin-bottom: r(12px);
      }

      .level {
        color: #909090;
        font-size: r(26px);
      }

    }

  }

  .info {
    background-color: white;
    margin: r(24px 0);

    .item {
      display: flex;
      justify-content: space-between;
      padding: r(20px 30px);

      & + .item {
        border-top: 1px solid #F4F4F4;
      }
    }


    .action {
      display: flex;
      justify-content: flex-end;
      padding: r(0 30px);

      .btn {
        margin: r(50px 0);
        background-color: $primary-color;
        color: white;
        font-size: r(22px);
        padding: r(11px 22px);
        border-radius: r(50px);
      }
    }
  }

  .list {
    background-color: white;
    padding: r(20px 30px);

    .title {
      height: r(60px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: r(34px);

      .btn {
        color: white;
        background-color: $primary-color;
        font-size: r(22px);
        height: r(50px);
      }
    }


    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: r(20px);

      .left {
        display: flex;
        align-items: center;

        .avatar {
          height: r(70px);
          width: r(70px);
          border-radius: 50%;
        }
        .name{
          font-size: r(34px);
          margin-left: r(20px);
        }
      }
      .btn{
        color: $primary-color;
      }

    }
  }
}
</style>